<template>
  <ContentWrap>
    <CardTitle title="DiyEditor DIY页面编辑器" />
    
    <div class="demo-section">
      <h3>基础使用</h3>
      <p>DiyEditor 是一个强大的可视化页面编辑器，支持拖拽组件、实时预览和配置管理。主要用于移动端页面的DIY装修。</p>
      <code class="code-block mt-10px">
        &lt;DiyEditor 
          v-model="pageConfig"
          title="页面编辑器"
          :libs="componentLibs"
          :show-navigation-bar="true"
          :show-tab-bar="true"
        /&gt;
      </code>
    </div>

    <CardTitle title="演示示例" />

    <!-- 基础编辑器示例 -->
    <div class="demo-section">
      <h4>1. 基础页面编辑器</h4>
      <p>包含导航栏、内容区域和底部导航的完整页面编辑器</p>
      <div class="editor-container">
        <DiyEditor
          v-model="basicPageConfig"
          title="基础页面编辑"
          :libs="basicLibs"
          :show-navigation-bar="true"
          :show-tab-bar="true"
          :show-page-config="true"
        >
          <template #toolBarLeft>
            <div class="toolbar-left">
              <el-button size="small" @click="handleImportTemplate">导入模板</el-button>
              <el-button size="small" @click="handleExportTemplate">导出模板</el-button>
            </div>
          </template>
        </DiyEditor>
      </div>
      <div class="result-display">
        <p><strong>页面配置数据：</strong></p>
        <pre>{{ JSON.stringify(basicPageConfig, null, 2) }}</pre>
      </div>
    </div>

    <!-- 自定义组件库示例 -->
    <div class="demo-section">
      <h4>2. 自定义组件库</h4>
      <p>使用自定义组件库，只显示特定组件</p>
      <div class="editor-container">
        <DiyEditor
          v-model="customPageConfig"
          title="自定义组件库"
          :libs="customLibs"
          :show-navigation-bar="false"
          :show-tab-bar="false"
          :show-page-config="true"
        />
      </div>
      <div class="result-display">
        <p><strong>自定义页面配置：</strong></p>
        <pre>{{ JSON.stringify(customPageConfig, null, 2) }}</pre>
      </div>
    </div>

    <!-- 移动端专用示例 -->
    <div class="demo-section">
      <h4>3. 移动端页面装修</h4>
      <p>专门为移动端设计的页面装修编辑器</p>
      <div class="editor-container">
        <DiyEditor
          v-model="mobilePageConfig"
          title="移动端页面装修"
          :libs="mobileLibs"
          :show-navigation-bar="true"
          :show-tab-bar="true"
          :show-page-config="true"
        />
      </div>
      <div class="result-display">
        <p><strong>移动端页面配置：</strong></p>
        <pre>{{ JSON.stringify(mobilePageConfig, null, 2) }}</pre>
      </div>
    </div>

    <CardTitle title="属性说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>属性名</th>
          <th>类型</th>
          <th>默认值</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>modelValue</td>
          <td>String | PageConfig</td>
          <td>-</td>
          <td>页面配置数据，支持JSON字符串或对象</td>
        </tr>
        <tr>
          <td>title</td>
          <td>String</td>
          <td>-</td>
          <td>编辑器标题</td>
        </tr>
        <tr>
          <td>libs</td>
          <td>DiyComponentLibrary[]</td>
          <td>[]</td>
          <td>组件库配置</td>
        </tr>
        <tr>
          <td>showNavigationBar</td>
          <td>Boolean</td>
          <td>false</td>
          <td>是否显示顶部导航栏</td>
        </tr>
        <tr>
          <td>showTabBar</td>
          <td>Boolean</td>
          <td>false</td>
          <td>是否显示底部导航菜单</td>
        </tr>
        <tr>
          <td>showPageConfig</td>
          <td>Boolean</td>
          <td>false</td>
          <td>是否显示页面配置</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="DiyComponentLibrary 配置说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>属性名</th>
          <th>类型</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>name</td>
          <td>String</td>
          <td>组件库名称</td>
        </tr>
        <tr>
          <td>extended</td>
          <td>Boolean</td>
          <td>是否默认展开</td>
        </tr>
        <tr>
          <td>components</td>
          <td>String[]</td>
          <td>组件ID列表</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="支持的移动端组件" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>组件类型</th>
          <th>组件ID</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr><td>基础组件</td><td>SearchBar</td><td>搜索栏</td></tr>
        <tr><td>基础组件</td><td>NoticeBar</td><td>通知栏</td></tr>
        <tr><td>基础组件</td><td>MenuSwiper</td><td>菜单轮播</td></tr>
        <tr><td>基础组件</td><td>MenuGrid</td><td>菜单网格</td></tr>
        <tr><td>基础组件</td><td>MenuList</td><td>菜单列表</td></tr>
        <tr><td>图文组件</td><td>ImageBar</td><td>图片栏</td></tr>
        <tr><td>图文组件</td><td>Carousel</td><td>轮播图</td></tr>
        <tr><td>图文组件</td><td>TitleBar</td><td>标题栏</td></tr>
        <tr><td>图文组件</td><td>VideoPlayer</td><td>视频播放器</td></tr>
        <tr><td>图文组件</td><td>Divider</td><td>分割线</td></tr>
        <tr><td>图文组件</td><td>MagicCube</td><td>魔方</td></tr>
        <tr><td>商品组件</td><td>ProductCard</td><td>商品卡片</td></tr>
        <tr><td>导航组件</td><td>NavigationBar</td><td>顶部导航栏</td></tr>
        <tr><td>导航组件</td><td>TabBar</td><td>底部导航菜单</td></tr>
      </tbody>
    </table>

    <CardTitle title="插槽说明" />
    <table class="properties-table">
      <thead>
        <tr>
          <th>插槽名</th>
          <th>说明</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>toolBarLeft</td>
          <td>工具栏左侧内容</td>
        </tr>
      </tbody>
    </table>

    <CardTitle title="编辑器功能特性" />
    <div class="features-grid">
      <div class="feature-card">
        <h5>🎨 可视化编辑</h5>
        <p>所见即所得的可视化编辑体验，实时预览编辑效果</p>
      </div>
      <div class="feature-card">
        <h5>🧩 拖拽组件</h5>
        <p>支持从组件库拖拽组件到编辑区域，组件间可拖拽排序</p>
      </div>
      <div class="feature-card">
        <h5>⚙️ 属性配置</h5>
        <p>右侧面板提供组件属性配置，支持样式和内容自定义</p>
      </div>
      <div class="feature-card">
        <h5>📱 移动端适配</h5>
        <p>专为移动端设计，完美还原移动端页面效果</p>
      </div>
      <div class="feature-card">
        <h5>💾 数据导入导出</h5>
        <p>支持页面配置的导入导出，便于模板管理</p>
      </div>
      <div class="feature-card">
        <h5>🔧 工具栏扩展</h5>
        <p>支持自定义工具栏，可添加重置、预览、保存等功能</p>
      </div>
    </div>
  </ContentWrap>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import type { DiyComponentLibrary } from '@/components/DiyEditor/src/util'

// 页面配置数据
const basicPageConfig = ref({
  page: {
    backgroundColor: '#f7f8fa',
    backgroundImage: ''
  },
  navigationBar: {
    style: 'default',
    backgroundColor: '#ffffff',
    textColor: '#333333',
    title: '页面标题'
  },
  tabBar: {
    backgroundColor: '#ffffff',
    textColor: '#999999',
    textColorSelected: '#ff6600'
  },
  components: []
})

const customPageConfig = ref({
  page: {
    backgroundColor: '#ffffff',
    backgroundImage: ''
  },
  components: []
})

const mobilePageConfig = ref({
  page: {
    backgroundColor: '#f0f0f0',
    backgroundImage: ''
  },
  navigationBar: {
    style: 'custom',
    backgroundColor: '#409eff',
    textColor: '#ffffff',
    title: '移动端页面'
  },
  tabBar: {
    backgroundColor: '#ffffff',
    textColor: '#666666',
    textColorSelected: '#409eff'
  },
  components: []
})

// 基础组件库配置
const basicLibs = reactive<DiyComponentLibrary[]>([
  {
    name: '基础组件',
    extended: true,
    components: ['SearchBar', 'NoticeBar', 'MenuGrid', 'MenuList']
  },
  {
    name: '图文组件',
    extended: true,
    components: ['ImageBar', 'Carousel', 'TitleBar', 'Divider']
  },
  {
    name: '商品组件',
    extended: false,
    components: ['ProductCard']
  }
])

// 自定义组件库配置
const customLibs = reactive<DiyComponentLibrary[]>([
  {
    name: '图文展示',
    extended: true,
    components: ['ImageBar', 'Carousel', 'VideoPlayer']
  },
  {
    name: '信息展示',
    extended: true,
    components: ['TitleBar', 'NoticeBar', 'Divider']
  }
])

// 移动端组件库配置
const mobileLibs = reactive<DiyComponentLibrary[]>([
  {
    name: '基础组件',
    extended: true,
    components: ['SearchBar', 'NoticeBar', 'MenuSwiper', 'MenuGrid', 'MenuList']
  },
  {
    name: '图文组件',
    extended: true,
    components: ['ImageBar', 'Carousel', 'TitleBar', 'VideoPlayer', 'Divider', 'MagicCube']
  },
  {
    name: '商品组件',
    extended: true,
    components: ['ProductCard']
  }
])

// 事件处理函数
const handleImportTemplate = () => {
  // 模拟导入模板
  const template = {
    page: {
      backgroundColor: '#f5f5f5',
      backgroundImage: ''
    },
    navigationBar: {
      style: 'default',
      backgroundColor: '#ff6600',
      textColor: '#ffffff',
      title: '模板页面'
    },
    components: [
      {
        id: 'SearchBar',
        property: {
          placeholder: '搜索商品',
          backgroundColor: '#ffffff'
        }
      },
      {
        id: 'NoticeBar',
        property: {
          text: '欢迎使用DIY编辑器模板！',
          backgroundColor: '#fff7e6'
        }
      }
    ]
  }
  
  basicPageConfig.value = template
  ElMessage.success('模板导入成功！')
}

const handleExportTemplate = () => {
  // 模拟导出模板
  const template = JSON.stringify(basicPageConfig.value, null, 2)
  console.log('导出的模板数据：', template)
  
  // 创建下载链接
  const blob = new Blob([template], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  const link = document.createElement('a')
  link.href = url
  link.download = 'diy-page-template.json'
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
  URL.revokeObjectURL(url)
  
  ElMessage.success('模板导出成功！')
}
</script>

<style scoped>
.demo-section {
  margin: 20px 0;
  padding: 20px;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
}

.demo-section h4 {
  margin-bottom: 15px;
  color: #303133;
  font-weight: 600;
}

.demo-section p {
  margin-bottom: 15px;
  color: #606266;
  line-height: 1.5;
}

.code-block {
  background: #f5f7fa;
  padding: 12px;
  border-radius: 4px;
  font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
  font-size: 13px;
  line-height: 1.4;
}

.editor-container {
  height: 600px;
  border: 1px solid #e4e7ed;
  border-radius: 4px;
  overflow: hidden;
  margin: 15px 0;
}

.toolbar-left {
  display: flex;
  gap: 8px;
}

.result-display {
  margin-top: 15px;
  padding: 15px;
  background: #f0f9ff;
  border: 1px solid #b3e5fc;
  border-radius: 4px;
}

.result-display pre {
  margin: 10px 0 0 0;
  font-size: 12px;
  color: #2563eb;
  max-height: 200px;
  overflow-y: auto;
}

.properties-table {
  width: 100%;
  border-collapse: collapse;
  margin: 15px 0;
}

.properties-table th,
.properties-table td {
  border: 1px solid #e4e7ed;
  padding: 12px;
  text-align: left;
}

.properties-table th {
  background: #f5f7fa;
  font-weight: 600;
  color: #303133;
}

.properties-table td {
  color: #606266;
}

.properties-table code {
  background: #f5f7fa;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 12px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 20px 0;
}

.feature-card {
  padding: 20px;
  background: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #409eff;
}

.feature-card h5 {
  margin: 0 0 10px 0;
  color: #303133;
  font-size: 16px;
}

.feature-card p {
  margin: 0;
  color: #606266;
  font-size: 14px;
  line-height: 1.5;
}
</style> 